<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Feed Reader using Google</title>
<!-- You need your own API key here: http://code.google.com/apis/ajaxfeeds/key.html -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="loadFeed.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	/*
	$.fn.loadFeed.defaults = { key: 'ABQIAAAAZ5u_kBX8p7DoxafRncT3ExQgVEt6K5HwwTquDi1g8QPHxAf9xBQXcZrTtQosYt72iwDdFnCOcqdojw' };
	
	$("#uconn-today1").loadFeed('http://feeds.feedburner.com/uconn-today');
	*/
});
</script>
<style type="text/css">
body{margin:2em;}
.red {
	color: #900;
}
.blue {
	color: #00F;
}
.green {
	color: #360;
}
pre, code {background-color:#eee; padding:1em;}
h2 { border-bottom: 1px solid #333; margin-top:2em;}
h2:first-child { margin-top:0px; }
</style>
</head>
<body>

<h2>Installation/Requirements</h2>
<p>This plug-in relies on jQuery and uses the Google Feed API. Obtaining an <a href="http://code.google.com/apis/ajaxfeeds/signup.html">API key</a> from Google is optional, <a href="http://code.google.com/apis/ajaxfeeds/key.html">but highly recommended</a>.</p>
<h3>1. Link to jQuery</h3>
<pre>&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
<h3>2. Link to loadFeed.js</h3>
<pre>&lt;script src=&quot;/path/to/loadFeed.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
<h3>3. Execute loadFeed()</h3>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;

$(document).ready(function(){

	$(&quot;ul#uconn-today&quot;).loadFeed('http://feeds.feedburner.com/uconn-today');

});

&lt;/script&gt;</pre>
<pre>
&lt;ul class=&quot;uconn-today&quot;&gt;

&lt;/ul&gt;</pre>
<h2>Usage</h2>
<p>
<pre>
  $(<span class="red"><em>selector</em></span>).loadFeed(<span class="blue"><em>feedURL</em></span>, <span class="green"><em>options</em></span>);</pre>
</p>
<table width="100%" border="0">
  <tr>
    <td width="150"><strong>Parameter</strong></td>
    <td width="75"><strong>Type</strong></td>
    <td><strong>Description</strong></td>
  </tr>
  <tr>
    <td class="red"><em>selector</em></td>
    <td>String</td>
    <td>The selector of the container that will hold the resulting HTML. This is usually the ID or class of an &lt;ul&gt; container.</td>
  </tr>
  <tr>
    <td class="blue"><em>feedURL</em></td>
    <td>String</td>
    <td>The URL of the feed that you wish to load.</td>
  </tr>
  <tr>
    <td class="green"><em>options</em></td>
    <td>Array</td>
    <td>Extra (optional) parameters that control the output of the feed.</td>
  </tr>
</table>
<h2>Available Options</h2>
<table width="100%" border="0">
  <tr>
    <td width="150"><strong>Option</strong></td>
    <td width="75"><strong>Type</strong></td>
    <td width="75"><strong>Default</strong></td>
    <td><strong>Description</strong></td>
  </tr>
  <tr>
    <td><em>num</em></td>
    <td>Integer</td>
    <td>5</td>
    <td>Number of headlines to retrieve.</td>
  </tr>
  <tr>
    <td><em>wrapper</em></td>
    <td>String</td>
    <td>&lt;li/&gt;</td>
    <td>A tag in which to wrap the anchor (&lt;a&gt;). Typically a &lt;li&gt; tag, but might be something different.</td>
  </tr>
  <tr>
    <td><em>target</em></td>
    <td>String</td>
    <td>_blank</td>
    <td>Sets the target attribute of the anchor.</td>
  </tr>
  <tr>
    <td><em>key</em></td>
    <td>String</td>
    <td>null</td>
    <td>Google Feed API key. Optional, but highly recommended.</td>
  </tr>
  <tr>
    <td><em>customHandler</em></td>
    <td>Function</td>
    <td>null</td>
    <td>By default this script assumes you are outputting a simple list of headlines for display in an &lt;ul&gt;. If you'd like to do something different with the data, you can use this function to iterate over each feed item and append it to the page. The <em>customHandler</em> function should accept two parameters: item, container. <strong>If the <em>customHandler</em> function is defined, wrapper and target options are ignored</strong>.</td>
  </tr>
</table>
<h2>Setting Options Globally</h2>
<p>Options can be set once, globally. For example, it's not very efficient to specify the API key option for every feed that's loaded onto a page. You can set that value once by doing the following:</p>
<pre>$.fn.loadFeed.defaults = { key: 'ABQIAAAAZ5u_kBX8p7DoxafRncT3ExQgVEt6K5HwwTquDi1g8QPHxAf9xBQXcZrTtQosYt72iwDdFnCOcqdojw' };
</pre>
</body>
</html>